//7.事项TOP10--echarts
/*参数data:
var data ={
  result:'96%',
  arr: [
    { name: '0%~80%', value: 23 }, 
    { name: '80%~85%', value: 3 }, 
    { name: '85%~90%', value: 10 }, 
    { name: '90%~95%', value: 16 }, 
    { name: '95%~100%', value: 19 }
  ]
}
*/

var MD08 = {
  f1:12*KO,
  f2:16*KO,
  f3:14*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    // if(this.md){
    //   this.md.setOption({
    //     series: [
    //       { data: data.zhu1 }, 
    //       { data: data.zhu2 }, 
    //       { data: data.zhu3 }
    //     ]
    //   })
    //   return false;
    // }else{
      this.myecharts(el,data)
    // }
  },
  myecharts: function(el,data) {  
    // 指定图表的配置项和数据

    var option = {
       // color: ["#EAEA26", "#906BF9", "#3DD1F9", "#01E17E", "#FE5656", "#FFAD05"],  
       color: ["#3DD1F9", "#FFAD05", "#906BF9", "#01E17E", "#FE5656"],  
       // backgroundColor: '#000',
       title: {
           text: data.result,
           // text: '整体满意度',
           // subtext: data.result,
           textStyle: {
               // color: '#f2f2f2',
               color: '#ffc72b',
               fontSize: this.f2,
               // align: 'center'
           },
           // subtextStyle: {
           //    fontSize: 20,
           //    color: ['#ff9d19'],
           // },
           x: 'center',
           y: 'center',
       },
        tooltip: {
          trigger: 'item',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#FFED27',
                  fontSize:this.f3,
                  color:'#001A53'
              }
          },
          textStyle:{
            fontSize:this.f2
          },
          formatter:'满意度区间：<br><span style="color:#82b0ec;">{b}</span>：<span style="color:#FFED27;">{c}</span>个窗口<br>占比：<span style="color:#49dff0">{d}%</span>',
          padding:[5*KO,10*KO]
        },       
       grid: {
           bottom: 150,
           left: 100,
           right: '10%'
       },
       // legend: {
       //     orient: 'vertical',
       //     top: "middle",
       //     right: "5%",
       //     textStyle: {
       //         color: '#f2f2f2',
       //         fontSize: this.f1,

       //     },
       //     icon: 'roundRect',
       //     data: data.arr,
       // },
       series: [
           // 主要展示层的
           {
               radius: ['30%', '61%'],
               center: ['50%', '50%'],
               type: 'pie',
                // label: {
                //   fontSize: this.f3,
                //   normal: {
                //     color: "#fff",
                //     //formatter: '{b|{b}\n     {d}%}',
                //     formatter: function(params, ticket, callback) {
                //       var total = 0; //总数量
                //       var percent = 0; //占比
                //       data.arr.forEach(function(v, index) {
                //         total += v.value;
                //       });
                //       percent = ((params.value / total) * 100).toFixed(1);
                //       return '{color1|' + params.name + '}\n{color2|' + params.value + '个}{color3|' + percent + '%}';
                //     },
                //     padding: [this.f1*0.6, -this.f2*4.5,0],
                //     rich: {
                //       color1: {
                //         color: "#82b0ec",
                //         fontSize: this.f1,
                //         // padding: [0, 4],
                //         align: 'center',
                //         fontWeight:'bold'
                //       },
                //       color2: {
                //         color: "yellow",
                //         align: 'center',
                //         fontSize: this.f1,
                //         padding: [6, this.f1*0.5],
                //         // fontWeight:'bold'
                //       },
                //       color3: {
                //         color: '#49dff0',
                //         fontSize: this.f1,
                //         align: 'center'
                //       }
                //     }
                //   }
                // },
                //  labelLine: {
                //      normal: {
                //          show: true,
                //          lineStyle: {
                //             width: 1*KO
                //           },
                //          length: this.f2*1,
                //          length2: this.f2*4
                //      },
                //      emphasis: {
                //          show: true
                //      }
                // },
               label: {
                   normal: {
                       show: true,
                       // formatter: "{b}\n{c}个",
                       textStyle: {
                           fontSize: this.f3,

                       },
                       position: 'outside'
                   },
                   emphasis: {
                       show: true
                   }
               },
               labelLine: {
                   normal: {
                       show: true,
                       length: 15,
                       length2: 20
                   },
                   emphasis: {
                       show: true
                   }
               },
               data: data.arr,
           },
           // 边框的设置
           {
               radius: ['30%', '34%'],
               center: ['50%', '50%'],
               type: 'pie',
               label: {
                   normal: {
                       show: false
                   },
                   emphasis: {
                       show: false
                   }
               },
               labelLine: {
                   normal: {
                       show: false
                   },
                   emphasis: {
                       show: false
                   }
               },
               animation: false,
               tooltip: {
                   show: false
               },
               data: [{
                   value: 1,
                   itemStyle: {
                       color: "rgba(250,250,250,0.3)",
                   },
               }],
           }, {
               name: '外边框',
               type: 'pie',
               clockWise: false, //顺时加载
               hoverAnimation: false, //鼠标移入变大
               center: ['50%', '50%'],
               radius: ['65%', '65%'],
               label: {
                   normal: {
                       show: false
                   }
               },
               data: [{
                   value: 9,
                   name: '',
                   itemStyle: {
                       normal: {
                           borderWidth: 2*KO,
                           borderColor: '#0b5263'
                       }
                   }
               }]
           },
       ]
    };

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















